<!-- VideoEditorDemo.vue (已修复版) -->
<template>
	<view class="page-container">
		<view class="preview-area">
			<!-- 循环渲染节点数组 -->
			<view v-for="(node, index) in nodes" :key="index">
				<!-- 如果是文本节点，使用 rich-text 渲染 -->
				<rich-text v-if="node.type === 'text'" :nodes="node.content"></rich-text>
				<!-- 如果是视频节点，使用原生 video 组件渲染 -->
				<view v-else-if="node.type === 'video'" class="video-wrapper">
					<video :src="node.src" controls style="width: 100%"></video>
				</view>
				<!-- 图片 -->
				<image v-else-if="node.type === 'img'" :src="node.src" style="width: 80%"></image>
			</view>
		</view>
	</view>
</template>

<script>
import { parseRichTextToNodes } from './tool.js';
export default {
	data() {
		return {
			nodes: [], // e.g. [ {type: 'text', content: '...'}, {type: 'video', src: '...'} ]
			demoText:
				'<p>\t\t缩进</p><p><span class="ql-size-small">10px</span></p><p>14px</p><p><span class="ql-size-large">18px</span></p><p><span class="ql-size-huge">32px</span></p><p><br></p><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6><p><br></p><h6><span class="ql-size-huge">32px的标题6</span></h6><p><span class="ql-size-huge">32px的文本</span></p><p><br></p><p><img src="https://jwxtcdn.jinlingkeji.cn/saastest/308/2025-06/2e325cc2033ec684fe616267bc4b2341.png"></p><iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://lf-cdn.trae.com.cn/obj/trae-com-cn/bannerIntro425.mp4"></iframe><p><img src="https://jwxtcdn.jinlingkeji.cn/saastest/308/2025-06/2e325cc2033ec684fe616267bc4b2341.png"></p><p><img src="https://jwxtcdn.jinlingkeji.cn/saastest/308/2025-06/2e325cc2033ec684fe616267bc4b2341.png"></p><iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://lf-cdn.trae.com.cn/obj/trae-com-cn/bannerIntro425.mp4"></iframe><p><br></p>'
		};
	},
	onLoad() {
		this.nodes = parseRichTextToNodes(this.demoText);
	}
};
</script>
